<template>
  <div class="page-container">
    <main>
      <div class="article-container">
        <a-image
            alt="首图"
            class="article-cover"
            :src="localUrl + state.articleInfo.cover"
            :fallback="defaultImg"
            width="100%"
        />
        <div class="article-wrap">
          <div class="article-head">
            <h1 class="title">{{ state.articleInfo.title }}</h1>
            <div class="options-wrap">
              <a-button @click="handleLike">
                <template #icon>
                  <like-outlined/>
                </template>
                点个赞吧
              </a-button>
              <div style="display: inline-block">
                <a-button @click="handleEdit">编辑</a-button>
                <a-button @click="handleStatus">{{ state.articleInfo.status == 1 ? '下架' : '上架' }}</a-button>
                <a-button danger @click="handleRemove">删除</a-button>
              </div>
            </div>
          </div>
          <div class="meta">
        <span class="time">
          <CalendarOutlined/> {{ state.articleInfo.created_time }}
        </span>
            <span class="category">
          <AppstoreOutlined/> {{ state.articleInfo.category_name }}
        </span>
            <span class="view">
          <FireOutlined/> {{ state.articleInfo.views + " 浏览" }}
        </span>
            <span class="view">
          <like-outlined/> {{ state.articleInfo.likes + " 喜欢" }}
        </span>
          </div>
          <a-alert
              :message="state.articleInfo.summary"
              type="warning"
              style="margin-bottom:20px;line-height:30px"
          />
          <div class="article-content" v-html="state.articleInfo.content"></div>
          <div class="article-footer">
            <div class="tags">
          <span
              v-for="item in state.articleInfo.tags"
              :key="item.id"
              @click="toHomePage(item.id)"
              class="trigger"
          >
            <TagsOutlined/>{{ item.name }}
          </span>
            </div>
            <div class="time">最后更新：{{ state.articleInfo.updated_time }}</div>
          </div>
        </div>
        <a-back-top/>
      </div>
    </main>
    <aside>
      <Account/>
      <Category/>
      <Tag/>
      <Catalogue/>
    </aside>
  </div>
</template>
<script>
import store from "@/store"
import { reactive, computed } from "vue"
import { useRoute, useRouter, onBeforeRouteUpdate } from "vue-router"
import { onMounted } from "vue"
import { timeFormat } from "@/utils"
import { defaultImg } from "@/data"
import { detail, doView, doLike, remove, updateStatus } from "@/api/article"
import dayjs from "dayjs";
import { localUrl } from "@/config/settings";
import { CODEENUM } from "@/config";
import { message } from "ant-design-vue";

import Account from "@/components/Aside/Account.vue";
import Category from "@/components/Aside/Category.vue";
import Tag from "@/components/Aside/Tag.vue";
import Catalogue from '@/components/Aside/Catalogue.vue'

export default {
  components: { Account, Category, Tag, Catalogue },
  setup() {
    const router = useRouter()
    const { query } = useRoute()

    const role = computed(() => store.getters.userInfo.role)

    let state = reactive({
      articleId: query.id,
      articleInfo: {
        category: "",
      },
    })
    const getArticleDetail = async () => {
      const { data, code } = await detail({
        id: state.articleId,
      })
      if (code != 200) return
      state.articleInfo = data
      state.articleInfo.created_time = dayjs(state.articleInfo.created_time).format("YYYY-MM-DD HH:mm")
      state.articleInfo.updated_time = dayjs(state.articleInfo.updated_time).fromNow(true)
    }

    onMounted(async () => {
      await doView({ id: state.articleId })
      await getArticleDetail()
    })
    // 页面未跳转，仅路由发生变化
    onBeforeRouteUpdate(async ({ query }) => {
      state.articleId = query.id
      await getArticleDetail()
    })

    const toHomePage = (id) => {
      router.push({ path: `/home`, query: { tag: id } })
    }

    const handleLike = async () => {
      const { code } = await doLike({ id: state.articleId })
      if (code !== CODEENUM.GD_SUCCESS) return;
      message.success("谢谢你喜欢我写的文章！")
    }

    const handleEdit = () => {
      router.push({ path: `/poster`, query: { id: state.articleId } })
    }

    const handleStatus = async () => {
      if (!state.articleId) return
      const { code } = await updateStatus({
        id: state.articleId,
        status: state.articleInfo.status == 1 ? 0 : 1
      })
      if (code != CODEENUM.OP_SUCCESS) return;
      state.articleInfo.status = (state.articleInfo.status == 1 ? 0 : 1)
    }

    const handleRemove = async () => {
      if (!state.articleId) return
      const { code } = await remove({
        ids: [state.articleId]
      })
      if (code != CODEENUM.OP_SUCCESS) return;
    }
    return {
      localUrl,
      role,
      defaultImg,
      state,
      timeFormat,
      toHomePage,
      handleEdit,
      handleStatus,
      handleRemove,
      handleLike
    }
  },
}
</script>
<style lang="less" scoped>
.article-container {
  position: relative;
  min-height: 50rem;
  background-color: #fff;
  border-radius: 0.5rem;
  overflow: hidden;
  box-shadow: 0 0.4rem 1rem rgba(0, 2, 4, 0.06), 0 0 0.1rem rgba(0, 2, 4, 0.11);

  .article-cover {
    width: 100%;
    min-height: 15rem;
  }

  .article-wrap {
    padding: 3rem;

    .article-head {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px;

      .title {
        font-size: 2.4rem;
        border-left: 0.5rem solid #d41e32;
        line-height: 2.8rem;
        padding-left: 1.4rem;
        margin: 0;
      }

      .article-options {
        transition: all 0.3s;
        visibility: hidden;
        opacity: 0;
      }

      &:hover {
        .article-options {
          visibility: visible;
          opacity: 1;
        }
      }
    }

    .options-wrap {
      .ant-btn {
        margin-left: 10px;
      }
    }

    .meta {
      font-size: 1.4rem;
      color: #999;
      margin-bottom: 1.4rem;

      & > span {
        margin-right: 2.4rem;
      }

      .anticon {
        color: #4dd2ff;
      }
    }

    :deep(.article-content) {
      line-height: 2.8rem;
      font-size: 1.4rem;
      text-align: justify;
      padding-bottom: 1.8rem;
      margin-bottom: 2rem;
      border-bottom: 1px solid #666;

      pre {
        white-space: pre;
        background-color: #f4f5f7;

        code {
          display: block;
          overflow-x: auto;
          padding: 1em;
          white-space: pre;
          word-break: normal;
        }
      }

      img {
        max-width: 100%;
        height: auto;
      }
    }

    .article-footer {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      font-size: 1.4rem;

      .tags {
        & > .trigger {
          margin-right: 0.8rem;
          padding: 0.4rem 0.8rem;
          border-radius: 0.4rem;
          transition: all 0.3s;

          .anticon {
            margin-right: 0.6rem;
          }

          &:hover {
            background: #efefef;
          }
        }
      }
    }
  }
}
</style>
